<template>
	<!-- 搜人才-搜索 -->
	<view class="" :class="{'page-bg':isSearch}">
		<view class="my-head">
			<view>
				<u-icon name="arrow-left" :color="color" @click="fnReturn"></u-icon>
			</view>
			<view class="search-box  fl-t">
				<!-- <pick-regions @getRegion="handleGetRegion" :defaultRegion="defaultRegion">
					<view class="fl-t  address" :style="{'color': color}">{{city}}
						<u-icon name="arrow-down" size="16" :color="color" @click="selCity"></u-icon>
					</view>
				</pick-regions> -->
				<!-- <u-icon name="search" color="#999" size="36"></u-icon> -->
				<u-input v-model="objPara.KeyWord" @confirm="confirmSearch" type="text" placeholder-class="input-pla"
					confirm-type="search" placeholder="请输入关键词搜索" clearable @clear="clickClear">
					<template slot="suffix">
						<view @click="searchChange">
							搜索
						</view>
					</template>
				</u-input>
			</view>
			<view class="head-right  fl-t" @click="fnCancel">
				高级搜索
			</view>
		</view>
		<view class="occupy"></view>
		<!--历史记录-->
		<view class="content-box" v-if="!cont">
			<view class="title">历史记录</view>
			<view class="fl-w" style="width: 100%;">

				<view class="list-tab" v-for="(item, index) in searchHistoryList" :key="index">
					<text @click="model(item, index)">{{ item }}</text>

					<u-icon @click="del(item, index)" name="close" style="margin-left: 10rpx;"></u-icon>
				</view>
			</view>
			<!-- 
			<view class="title">热门搜索</view>
			<view class="fl-w">
				<view class="list-tab">9555d</view>
			</view> -->
		</view>
		<!-- 收索地址 -->
		<!-- <view class="content-list" > -->
		<scroll-view scroll-y v-else :style="{'height':windowHeight-customBarH+'px'}" class="scrollCla"
			refresher-enabled='true' refresher-default-style='none' refresher-background='#f1f2f6'
			refresher-threshold='15' :refresher-triggered='loading' @refresherrefresh="onrefresh"
			@scrolltolower='scrolltolower'>
			<u-loading-icon v-if="loading"></u-loading-icon>
			<view class="list-li" v-for="(item, index) in listData" :key="index" @click="JobDetails(item)"
				v-if="listData.length">
				<view class="li-left">
					<view class="top-img">
						<image class="img" v-if="(item.Avatar == '' || item.Avatar == null) && item.Sex == 1 "
							:src="man1" mode=""></image>
						<image class="img" v-else-if="(item.Avatar == '' || item.Avatar == null) && item.Sex == 2 "
							:src="woman1" mode=""></image>
						<u-avatar v-else class="img" :src="URL+item.Avatar" shape="square"
							:default-url="src"></u-avatar>
						<image class="imgs" :src="item.Sex == 1 ? man : woman" shape="square"></image>
					</view>
					<view class="bottom-text">{{item.Age + '岁'}}</view>
				</view>
				<view class="li-right">
					<view class="position">
						<view class="position-left textlinclamp">
							<view class="position-left1">
								{{item.Name}}
							</view>
							<view class="position-left2">
								{{item.CurrentRole == 0 ? '职场人' : '学生'}}
							</view>
						</view>
						<view class="position-right" style="width: 120rpx;">
							{{item.JobExpect.Negotiable ? '面议' :formatNumber(item.JobExpect.MinWage) + '-' + formatNumber(item.JobExpect.MaxWage)}}
						</view>
					</view>
					<view class="information">
						<span>{{item.EducationLevelStr}}</span><span>丨</span>
						<span>{{item.WorkYear + '年经验'}}</span><span>丨</span>
						<span>{{item.JobExpect.WorkType==0?'全职':'兼职'}}</span><span>丨</span>
						<span>{{item.CurrentStatusStr}}</span>
					</view>
					<view class="text">
						{{'期望职位：'+item.JobExpect.PositionName}}
					</view>
				</view>
			</view>
			<u-loadmore :status="status" v-if="listData.length" />
		</scroll-view>

		<u-empty v-if="!listData.length" mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png">
		</u-empty>
		<!-- </view> -->
	</view>
</template>

<script>
	import pickRegions from '@/pages/component/pick-regions/pick-regions.vue'
	export default {
		props: {
			region: { //定位
				type: Array,
				default () {
					return []
				}
			},
			color: {
				type: String,
				default: "#000"
			},
		},
		data() {
			return {
				statusBarH: 0, //状态栏高度
				customBarH: 0, //导航栏高度
				windowWidth: 0, //窗口宽度
				windowHeight: 0, //窗口高度
				safeAreaInsets: 0, //底部导航栏
				URL: this.$config.domain.staticUrl,
				city: '', //显示的市区
				filter: ["重庆市", "上海市", "天津市", "北京市"],
				defaultRegion: ["重庆市", "", ""],
				isSel: false, //是否是选择
				isSearch: false,

				src: '/static/static/images/avatar1_100.png',
				man: '/static/image/my/man.png',
				woman: '/static/image/my/woman.png',
				man1: "/static/recruit/index/nan.png",
				woman1: "/static/recruit/index/nv.png",
				status: 'loadmore',
				mores: true,
				cont: false,

				objPara: {
					PageSize: 10, // 每页大小
					PageIndex: 1, // 页码
					PositionList: null, // 职位ID
					Age: "", // 年龄
					EducationLevel: null, // 教育程度
					Marriage: null, // 婚姻状况 0未婚 1已婚
					Industry: null, // 公司行业
					ProvinceCode: "", // 工作地点 省
					KeyWord: null, // 关键字搜索
					Sex: null, // 性别 1男 2女
					Category1: null, // 职位分类1 职位父级分类
					CityCode: "", // 工作地点 市
					WorkType: null, // 职位性质 0全职 1兼职 2实习
					WorkYear: null, // 工作年限 0应届生 1在校生； 1年以内 0-1，十年以上 10-100
					Wage: null, // 薪资待遇
					CurrentStatus: null, // 目前状态
				},
				listData: [],

				searchHistoryList: [], //搜索历史
				searchList: "",
				loading: false,
			}
		},
		async onLoad(o) {
			this.searchList = uni.getStorageSync('dianjiqiye').EnCode
			let list = await uni.getStorage({
				key: this.searchList
			});


			if (list[1].data) {
				this.searchHistoryList = JSON.parse(list[1].data);
			}


		},
		components: {
			pickRegions
		},
		computed: {},
		onShow() {

		},
		// 初次渲染
		onReady() {


		},
		created() {
			// console.log(uni.getStorageSync('dianjiqiye'))
			// this.searchList = uni.getStorageSync('dianjiqiye').EnCode
			const app = getApp()
			// 获取状态栏和导航条高度 窗口宽度
			this.statusBarH = app.globalData.statusBarH;
			this.customBarH = app.globalData.customBarH;
			this.windowWidth = app.globalData.phoneInformation.windowWidth;
			this.windowHeight = app.globalData.phoneInformation.windowHeight;
		},
		watch: {
			"$store.state.screeningData": {
				handler(val) {
					console.log(val,'监听1-------------------')
					this.objPara.PositionList = val[0].EnCode
					this.objPara.CurrentStatus = val[1].EnCode
					this.objPara.WorkYear = val[2].EnCode
					this.objPara.Wage = val[3].EnCode
					if (val[4].EnCode) {
						this.objPara.EducationLevel = Number(val[4].EnCode) // Number
					} else {
						this.objPara.EducationLevel = null
					}
					if (val[5].EnCode) {
						this.objPara.Sex = Number(val[5].EnCode) // Number
					} else {
						this.objPara.Sex = null
					}
					if (val[6].EnCode) {
						this.objPara.WorkType = Number(val[6].EnCode) // Number
					} else {
						this.objPara.WorkType = null
					}
					this.objPara.Age = val[7].EnCode

					this.listData = []
					this.objPara.PageIndex = 1
					console.log(val,this.objPara,'监听222-------------------')
					this.getJobIntention()
					console.log(val,'监听3333-------------------')
				},
				deep: true
			},
		},
		// onReachBottom() {
		// 	// 下拉懒加载

		// 	// 加载前值为loadmore，加载中为loading，没有数据为nomore
		// 	if (this.status != "nomore") {
		// 		this.status = "loading";
		// 		this.getJobIntention()
		// 	}

		// },
		methods: {

			//上拉加载
			scrolltolower() {
				if (this.status != "nomore") {
					this.status = "loading";
					this.getJobIntention()
				}
			},

			// 下拉刷新
			onrefresh() {
				this.loading = true
				setTimeout(() => {
					this.loading = false;
					this.listdata();
				}, 1000);
			},

			searchChange() {
				if (this.objPara.KeyWord == null || this.objPara.KeyWord == "") {
					this.$util.toast("搜索内容不能为空")
					return
				}
				this.listData = []
				this.objPara.PageIndex = 1
				this.confirmSearch()
				this.getJobIntention()
			},
			getJobIntention() { //搜索人才
				this.cont = true
				this.$http.huirc.talentPoolSearch(this.objPara).then(res => {
					if (res.Success) {
						if (res.Result.Items.length == 0) {
							// 没有数据----
							this.status = "nomore";
							this.mores = false;
							return;
						}
						this.listData = this.listData.concat(res.Result.Items)
						console.log(this.listData, '数据------------')
						if (res.Result.Items.length >= this.objPara.PageSize) {

							this.mores = true;
							this.objPara.PageIndex++;
							this.status = "loadmore";
							// 表示还有数据
						} else {

							//没有更多数据了
							this.status = "nomore";
							this.mores = false;
						}
						console.log(this.listData)
					}
				})
			},

			// 数字转K
			formatNumber(num) {
				return num >= 1e3 ? (num / 1e3).toFixed(0) + 'k' : num
			},

			fnReturn() {
				uni.navigateBack();
			},
			selCity() {
				// this.$emit("selCity");
			},
			// 输入框清空
			clickClear() {
				this.cont = false
			},
			JobDetails(item) {
				// ?renid=${item.f_faburenid}&f_id=${item.f_id}
				console.log(item)
				let int = item.JobExpectId
				uni.navigateTo({
					url: `/pages/views/packageA/type-recruit/search/JobDetails?key=${int}`
				})
			},

			model(item, index) {
				this.objPara.KeyWord = item
				this.listData = []
				this.listData.PageIndex = 1
				this.getJobIntention()
			},
			del(item, index) {
				this.searchHistoryList.splice(index, 1)
				uni.setStorage({
					key: this.searchList,
					data: JSON.stringify(this.searchHistoryList)
				});
			},
			// 点击完成按钮时触发
			confirmSearch(value) {
				console.log(value)
				// return
				if (!this.searchHistoryList.includes(this.objPara.KeyWord)) {
					this.searchHistoryList.unshift(this.objPara.KeyWord);
					uni.setStorage({
						key: this.searchList,
						data: JSON.stringify(this.searchHistoryList)
					});
				} else {
					//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
					let i = this.searchHistoryList.indexOf(this.objPara.KeyWord);
					this.searchHistoryList.splice(i, 1);
					this.searchHistoryList.unshift(this.objPara.KeyWord);
					// uni.showToast({
					// 	title: '不能重复添加'
					// });
					uni.setStorage({
						key: this.searchList,
						data: JSON.stringify(this.searchHistoryList)
					});
				}
			},

			fnsetHistory(val) {
				let List = uni.getStorageSync("searchHistory").split(',');
				if (!List.includes(val)) {
					List.unshift(val);
					if (List.length > 10) {
						List = List.slice(0, 10)
					}
					List = List.join(',');
					uni.setStorageSync("searchHistory", List);
				}
			},
			fnCancel() {
				console.log(111)
				uni.navigateTo({
					url: '/pages/views/packageA/type-recruit/search/advanced-search',
				});
			},
			handleGetRegion(e) { //获取到的数据
				this.isSel = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-bg {
		width: 100%;
		min-height: 100vh;
		background-color: #f9f9f9;
	}

	.occupy {
		height: calc(88rpx + var(--status-bar-height));
	}

	.my-head {
		position: fixed;
		// top: 0;
		width: 100%;
		padding: var(--status-bar-height) 30rpx 0 30rpx;
		height: calc(88rpx + var(--status-bar-height));
		display: flex;
		//justify-content: space-between;  
		align-items: center;
		box-sizing: border-box;
		z-index: 999;
		background-color: #FFF;
		// background: rgb(22, 132, 252);


		.search-box {
			background: #F7F7F7;
			border-radius: 32px;
			height: 64rpx;
			margin: 0 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			flex: 1;

			.address {
				font-size: 28rpx;
				font-family: PingFang-SC-Heavy;
				font-weight: bold;
			}


			.u-input {
				width: auto !important;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
				margin-left: 20rpx;
				flex: 1;
			}

			.u-border {
				border-width: 0 !important
			}

			/deep/.u-input__content__subfix-icon {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.input-pla {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}



		.head-right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			width: 70rpx;
		}
	}


	.content-box {
		padding: 20rpx 30rpx;
		width: 100%;
		height: calc(100vh - 88rpx);
		box-sizing: border-box;
		background-color: #FFFFFF;

		.title {
			margin: 30rpx 0;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #313131;
		}

		.list-tab {
			margin: 0 20rpx 20rpx 0;
			padding: 14rpx 20rpx;
			background: #F7F7F7;
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			display: flex;
		}
	}

	// .content-list {
	// 	width: 100%;
	// 	margin-top: 20rpx;
	// 	// background-color: #fff;
	// 	// padding: 40rpx 0;
	// 	box-sizing: border-box;
	// 	overflow-y: auto;
	// 	padding: 0 20rpx;

	.list-li {
		// padding: 20rpx 30rpx;
		display: flex;
		justify-content: left;
		background-color: #fff;
		padding: 30rpx 20rpx;
		margin: 20rpx;
		border-radius: 8rpx;

		.li-left {
			.top-img {
				position: relative;

				/deep/.img {
					width: 108rpx !important;
					height: 108rpx !important;
					border-radius: 100px !important;

					.u-avatar__image {
						width: 100% !important;
						height: 100% !important;
					}
				}

				.imgs {
					width: 29rpx;
					height: 29rpx;
					border-radius: 29rpx;
					position: absolute;
					right: -8rpx;
					bottom: -2rpx;
				}
			}

			.bottom-text {
				width: 108rpx;
				height: 42rpx;
				font-size: 24rpx;
				line-height: 42rpx;
				text-align: center;
				margin-top: 24rpx;
			}
		}

		.li-right {
			flex: 1;
			margin-left: 20rpx;

			.position {
				display: flex;
				justify-content: space-between;
				height: 45rpx;

				.position-left {
					width: 80%;
					display: flex;

					.position-left1 {
						font-size: 32rpx;
						font-weight: 400;
						color: #000000;
						line-height: 45rpx;
					}

					.position-left2 {
						margin-left: 20rpx;
						width: 108rpx;
						height: 42rpx;
						font-size: 24rpx;
						line-height: 42rpx;
						text-align: center;
						border-radius: 10rpx;
						border: 1rpx solid #476DF0;
						color: #476DF0;
					}
				}

				.position-right {
					font-size: 30rpx;
					font-weight: 400;
					color: #F35370;
					line-height: 45rpx;
				}
			}

			.information {
				height: 33rpx;
				margin: 20rpx 0 25rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #313131;
				line-height: 33rpx;
			}

			.text {
				height: 75rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}
	}


	// }
</style>